<template>
  <div class="custom-info">
    <div class="left-img">
      <el-avatar v-if="data.gender === '男'" class="avatar-image" :src="male"></el-avatar>
      <el-avatar v-if="data.gender === '女'" class="avatar-image" :src="female"></el-avatar>
    </div>
    <div class="right-info">
      <div class="name">
        <span>{{data.name || '无'}}</span>
        <div class="sex">
          <el-icon v-if="data.gender === '男'" class="male-color"><male /></el-icon>
          <el-icon v-if="data.gender === '女'" class=" female-color"><female /></el-icon>
          
        </div>
      </div>
      <div class="phone">
        <div class="medical-num-item">
          <el-icon><add-location /></el-icon>
          <span>{{data.historySickNum || '暂无'}}</span> 
        </div>
        <div class="phone-item">
          <el-icon><phone /></el-icon>
          <span>{{data.mobileFirstNumStr || '暂无' }}</span> 
        </div>
        <div class="phone-item">
          <span>咨询师: </span>
          <span class="consult">{{data.lastSecondaryUserName || '无'}}</span>
        </div>
      </div>
      <div class="doctot-time">
        <div>
          <span>上次就诊时间/医生: </span>
          <span>{{data.lastSickRecordTime}}</span>
          <span>{{data.lastRecordDetailDoctorName || '无'}}</span>
        </div>
        
      </div>

    </div>
  </div>
</template>

<script lang="ts" >
import { Male, Female, AddLocation, Phone } from '@element-plus/icons-vue'
// 引入图片资源
import male from "../../assets/image/male-adult.png"
import female from "../../assets/image/female-adult.png"
import { defineComponent, PropType } from 'vue'

type CostomInfo = {
  gender: string,
  name: string,
  historySickNum: string,
  mobileFirstNumStr: string,
  lastSickRecordTime: string,
  lastRecordDetailDoctorName: string,
  lastSecondaryUserName: string
}
export default defineComponent({
  components: {
    Male,
    Female,
    AddLocation,
    Phone
  },
  props: {
    data: {
      type: Object as  PropType<CostomInfo>,
      default: {}
    }
  },
  name: 'CustomInfo',
  setup() {
    return {
      male,
      female,
    }
  }
})

</script>

<style lang="scss" scoped>
  .custom-info {
    height: 120px;
    background-color: #fafafa;
    display: flex;

    .left-img {
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;

      .avatar-image {
        width: 60px;
        height: 60px;
      }
    }

    .right-info {
      flex: 1;

      .name {
        display: flex;
        & > span {
          font-size: 20px;
          font-weight: bold;
          padding-right: 10px;
        }

        .sex {
          width: 20px;
          height: 20px;
          background: #409eff;
          border-radius: 50%;
          text-align: center;
          & > i {
            color: white;
          }
        }
      }

      .phone {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 50px;

        .medical-num-item {
          width: 40%;
        }
        .phone-item {
          width: 50%;
        }
      }

      .consult {
        background-color: $consult;
        color: #fff;
        border-radius: 4px;
        padding: 2px 3px;
      }

      .doctot-time {
        display: flex;

        & > div:nth-child(1) {
          & > span:nth-child(3) {
            margin-left: 10px;
            padding: 2px 3px;
            border-radius: 4px;
            background-color: #409EFF;
            color: #fff;
            text-align: center;
          }
        }
        // & > div:nth-child(2) {
        //   width: 40%;
        // }
      }
    }
  }
</style>